<template>
  <div class="content">
    <div class="left">
      <el-scrollbar style="height: 95%">
        <el-tree
          ref="treeRef"
          :data="treeData"
          :props="defaultProps"
          @node-click="nodeClick"
          default-expand-all
          node-key="id"
          highlight-current
          :current-node-key="currentNodekey"
        ></el-tree>
      </el-scrollbar>
    </div>
    <div class="right">
      <el-form inline :model="formData">
        <el-form-item label="开始时间">
          <el-date-picker
            type="datetime"
            placeholder="选择开始时间"
            size="mini"
            v-model="formData.startTime"
            default-time="00:00:00"
            :picker-options="startTimePicker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            type="datetime"
            placeholder="选择结束时间"
            size="mini"
            v-model="formData.endTime"
            default-time="00:00:00"
            :picker-options="endTimePicker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getList"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div class="chartBoxs" v-loading="loadingEcharts">
        <div class="sectionChartbox" id="section" style="height: 60vh"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import echarts from "echarts";
import * as serviceApi from "../../../common/service.config";

Axios.defaults.withcredentials = true;

export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      currentNodekey: "", //默认选中的节点树
      formData: {
        startTime: moment().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"),
        endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      },
      // 横纵设置总列表
      sectionList: [],
      sectionName: "",
      sectionChart: "",
      loadings: false,
      loadingEcharts: true,
      groupId: null,
      monitorId: sessionStorage.getItem("monitorId"),
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getTreeList();
    });
  },
  computed: {
    startTimePicker() {
      return {
        disabledDate: (time) =>
          this.formData.startTime
            ? time.getTime() < new Date(this.formData.minTime).getTime() ||
              time.getTime() > new Date(this.formData.endTime).getTime()
            : false,
      };
    },
    endTimePicker() {
      return {
        disabledDate: (time) =>
          this.formData.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.formData.startTime).getTime()
            : false,
      };
    },
  },

  methods: {
    // 获取树形菜单
    getTreeList() {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"monitorId\\":\\"${this.monitorId}\\"}","serviceCode":"transverseProfileLeftTree","timestamp":"","uuid":""}`,
      }).then((res) => {
        if (res.data.resultcode == "0000") {
          let treeData = res.data.parameter;
          let siderList = [];
          for (let i = 0; i < treeData.length; i++) {
            if (treeData[i].list.length > 0) {
              this.currentNodekey = treeData[0].list[0].id;
              this.groupId = treeData[0].list[0].id;
              this.$nextTick(() => {
                this.$refs.treeRef.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
              });
            }
            siderList.push({
              label: treeData[i].typeName,
              children: [],
            });
            let siderListChildren = treeData[i].list;
            for (let k = 0; k < siderListChildren.length; k++) {
              siderList[i].children.push({
                id: siderListChildren[k].id,
                label: siderListChildren[k].name,
              });
            }
          }
          function isClick(obj) {
            if (obj.id == sessionStorage.getItem("type")) {
              obj.default = true;
              return obj;
            }
            for (let i in obj) {
              if (obj.children) {
                isClick(obj.children);
              } else if (Array.isArray(obj)) {
                obj.forEach((item) => {
                  isClick(item);
                });
              }
            }
          }
          isClick(siderList);
          this.treeData = siderList;
          this.getList();
        } else {
          this.treeData = [];
        }
      });
    },
    nodeClick(d, node, tree) {
      this.groupId = node.data.id;
      this.getList();
    },
    //后台请求
    getList() {
      this.loadingEcharts = true;
      if (this.groupId == null) {
        this.$emit("loadingOn", this.loading);
        this.loadingEcharts = false;
      } else {
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"groupId\\":\\"${
            this.groupId
          }\\",\\"startTime\\":\\"${moment(this.formData.startTime).format(
            "YYYY-MM-DD HH:mm:ss"
          )}\\",\\"endTime\\":\\"${moment(this.formData.endTime).format(
            "YYYY-MM-DD HH:mm:ss"
          )}\\"}","serviceCode":"listDataByGroupProcessor","timestamp":"","uuid":""}`,
        }).then((res) => {
          if ((res.resultcode = "0000")) {
            this.sectionList = res.data.parameter;
            let data = res.data.parameter;
            for (let i = 0; i < data.length; i++) {
              let sectionName = data[i].name;
              var date1 = [];
              var date2 = [];
              var date3 = [];
              var date4 = [];
              var date5 = [];
              var levelData = [];
              var lowerData = [];
              var timeDate = [];
              for (let j = 0; j < data[i].list.length; j++) {
                if (data[i].list[j].sensorList[0] != undefined) {
                  if (data[i].list[j].sensorList[0].nozzleHeight) {
                    date1[j] = Number(
                      data[i].list[j].sensorList[0].nozzleHeight
                    ).toFixed(3);
                  } else {
                    let nozzleHeight = null;
                    data[i].list[j].sensorList[0].nozzleHeight = nozzleHeight;
                  }
                }
                if (data[i].list[j].sensorList[1] != undefined) {
                  if (data[i].list[j].sensorList[1].nozzleHeight) {
                    date2[j] = Number(
                      data[i].list[j].sensorList[1].nozzleHeight
                    ).toFixed(3);
                  } else {
                    let nozzleHeight = null;
                    data[i].list[j].sensorList[1].nozzleHeight = nozzleHeight;
                  }
                }
                if (data[i].list[j].sensorList[2] != undefined) {
                  if (data[i].list[j].sensorList[2].nozzleHeight) {
                    date3[j] = Number(
                      data[i].list[j].sensorList[2].nozzleHeight
                    ).toFixed(3);
                  } else {
                    let nozzleHeight = null;
                    data[i].list[j].sensorList[2].nozzleHeight = nozzleHeight;
                  }
                }
                if (data[i].list[j].sensorList[3] != undefined) {
                  if (data[i].list[j].sensorList[3].nozzleHeight) {
                    date4[j] = Number(
                      data[i].list[j].sensorList[3].nozzleHeight
                    ).toFixed(3);
                  } else {
                    let nozzleHeight = null;
                    data[i].list[j].sensorList[3].nozzleHeight = nozzleHeight;
                  }
                }
                if (data[i].list[j].sensorList[4] != undefined) {
                  if (data[i].list[j].sensorList[4].nozzleHeight) {
                    date5[j] = Number(
                      data[i].list[j].sensorList[4].nozzleHeight
                    ).toFixed(3);
                  } else {
                    let nozzleHeight = null;
                    data[i].list[j].sensorList[4].nozzleHeight = nozzleHeight;
                  }
                }

                timeDate[j] = moment(data[i].list[j].date).format(
                  "YYYY-MM-DD HH:mm:ss"
                );
                var legendDate = [];
                for (let k = 0; k < data[i].list[j].sensorList.length; k++) {
                  legendDate[k] = data[i].list[0].sensorList[k].sensorName;
                  if (!data[i].list[j].sensorList[k].levelData) {
                    let levelData = null;
                    data[i].list[j].sensorList[k].levelData = levelData;
                  }
                  levelData[j] = Number(
                    data[i].list[j].sensorList[k].levelData
                  ).toFixed(3);
                  if (!data[i].list[j].sensorList[k].lowerData) {
                    let lowerData = null;
                    data[i].list[j].sensorList[k].lowerData = lowerData;
                  }
                  lowerData[j] = Number(
                    data[i].list[j].sensorList[k].lowerData
                  ).toFixed(3);
                }
                legendDate.push("库水位", "尾水位");
              }
              this.section(
                timeDate,
                date1,
                date2,
                date3,
                date4,
                date5,
                levelData,
                lowerData,
                legendDate,
                sectionName
              );
            }
            this.loadingEcharts = false;
            this.$emit("loadingOnOn", this.loadings);
          } else {
            this.sectionList = [];
            this.$message({
              message: "无数据",
              offset: 400,
              duration: 1000,
            });
            this.loadingEcharts = false;
          }
        });
      }
    },
    // 横剖面
    section(
      timeDate,
      date1,
      date2,
      date3,
      date4,
      date5,
      levelData,
      lowerData,
      legendDate,
      sectionName
    ) {
      this.sectionChart = echarts.init(document.getElementById("section"));
      let option = {
        title: {
          text: sectionName + "测压管水位过程线",
          left: "center",
          top: 5,
        },
        color: ["#5470c6", "#91cc75", "#7A0099", "#00DDDD", "#444444","#CC0000", "#EE7700",],
        tooltip: {
          trigger: "axis",
          formatter(params) {
            let tip = params[0].name + "<br/>";
            for (let y = 0; y < params.length; y++) {
              tip +=
                params[y].marker +
                params[y].seriesName +
                " : " +
                params[y].value +
                " m<br/>";
            }
            return tip;
          },
        },
        legend: {
          top: 30,
          data: legendDate,
        },
        grid: {
          left: "6%",
          right: "6%",
          bottom: "8%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: true,
            },
            show: true,
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: timeDate,
        },
        yAxis: {
          type: "value",
          scale: true,
        },
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 0,
            end: 100,
            height: 20,
            bottom: "2%",
            left: "7%",
          },
          //下面这个属性是里面拖到
          {
            type: "inside",
            show: true,
            xAxisIndex: [0],
            start: 0, //默认为1
            end: 100, //默认为100
            moveOnMouseWheel: false,
            preventDefaultMouseMove: false,
            showDataShadow: false, //是否显示数据阴影 默认auto
            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
            realtime: true, //是否实时更新
          },
        ],
        series: [
          {
            name: legendDate[0],
            type: "line",
            data: date1,
            connectNulls: true,
          },
          {
            name: legendDate[1],
            type: "line",
            data: date2,
            connectNulls: true,
          },
          {
            name: legendDate[2],
            type: "line",
            data: date3,
            connectNulls: true,
          },
          {
            name: legendDate[3],
            type: "line",
            data: date4,
            connectNulls: true,
          },
          {
            name: legendDate[4],
            type: "line",
            data: date5,
            connectNulls: true,
          },
          {
            name: "库水位",
            type: "line",
            data: levelData,
            connectNulls: true,
          },
          {
            name: "尾水位",
            type: "line",
            data: lowerData,
            connectNulls: true,
          },
        ],
      };
      this.sectionChart.setOption(option);
      setTimeout(function () {
        window.onresize = function () {
          this.sectionChart.resize();
        };
      }, 200);
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  .left {
    margin-top: 2.8rem;
    width: 10rem;
    height: 48rem;
    .el-scrollbar /deep/ .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .el-tree {
      background-color: transparent;
      /deep/ .el-tree-node__content:hover {
        background-color: #f0f7ff;
      }
      /deep/ .el-tree-node:focus > .el-tree-node__content {
        background-color: #f0f7ff;
      }
      /deep/ .custom-tree-node:hover {
        background: transparent;
      }
      /deep/ .el-tree-node:focus > .el-tree-node__content .custom-tree-node {
        background-color: transparent;
      }
    }
  }
  .right {
    padding-top: 2rem;
    width: 86%;
    height: 49rem;
    .chartBoxs {
      width: 100%;
      height: 80vh;
      .sectionChartbox {
        width: 90%;
        margin-bottom: 5%;
        color: #111;
      }
    }
  }
}
</style>